<!-- resources/views/admin/finance_chart.blade.php -->
<div class="card">
    <div id="annualChart" style="width:100%; height:400px;"></div>
</div>

<script>
    $(function () {
        const chart = echarts.init(document.getElementById('annualChart'));
        const option = {
            title: { text: '年度收支趋势图', left: 'center' },
            tooltip: { trigger: 'axis' },
            legend: { data: ['收入', '支出'], top: 'bottom' },
            xAxis: {
                type: 'category',
                data: @json($months),  // 如 ['2024-01', '2024-02', ...]
                axisLabel: { rotate: 45 }
            },
            yAxis: { type: 'value' },
            series: [
                {
                    name: '收入',
                    type: 'line',
                    data: @json($income),
                    itemStyle: { color: '#67C23A' },
                    smooth: true
                },
                {
                    name: '支出',
                    type: 'line',
                    data: @json($expense),
                    itemStyle: { color: '#F56C6C' },
                    smooth: true
                }
            ]
        };
        chart.setOption(option);
    });
</script>
